<template>
    <!-- 环形图 -->
    <canvas canvas-id="canvasRing" id="canvasRing" class="charts"></canvas>
</template>

<script>

    import uCharts from '@/pages/common/u-charts/u-charts.js';
    var _self;
    var canvaRing = null;
    
    export default {
        props: {
            width: {
                type: Number
            },
            ring_data: {
                type: Array
            },
        },
        data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio: 1,
			}
        },
        watch: {
            width(val){
               this.cWidth = val; 
               this.getData();
            }
        },
		mounted() {
			_self = this;
			this.cWidth = this.width;
			this.cHeight = uni.upx2px(500);
			if(this.cWidth != 0) {
                this.getData();
            }
		},
		methods: {
			getData(){
                
                let Ring = {
                    series: this.ring_data
                };
                _self.showRing("canvasRing",Ring);
			},
			showRing(canvasId,chartData){
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
                    fontSize: 11,
                    padding:[0,0,0,0],
					legend: true,
					extra: {
						pie: {
						  offsetAngle: -45,
						  ringWidth: 20,
						  labelWidth:15
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 500upx;
}
</style>